iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
0
Modern Web

少年學Vue,如隙中窺月系列 第 5

[Day5] 物件和陣列

  • 分享至 

  • xImage
  •  

從前面的文章我們可以看出 Vue 是用物件的方式來存取資料,這邊我們就複習一下物件和陣列的差別。

陣列

假設我們今天要計算全班同學的數學成績平均(假設班上只有3個人),在沒有陣列的狀況下,寫法如下 。

var math1 = 80;
var math2 = 90;
var math3 = 60;
var total = math1 + math2 + math3;
var average = total / 3

但是如果使用陣列之後,可以這樣寫。

var math = [80,90,60];
var total = 0;
for(var i=0;i<math.length;i++){
	total += math[i]
}
var average_math = total / 3

雖然和第一個程式相比感覺程式沒有減少太多程式碼,但是當如果我們變數變多,比如50個人,就可以減少宣告很多變數,達到更簡潔的程式碼。

物件

假設我們今天除了上面的數學考試,還多了英文考試,此時如果我們要紀錄每個同學的名字還有成績,如果用陣列的寫法如下。

var name = ['Leo','Amy','Perter'] //紀錄學生名字
var math = [80,90,60]; //紀錄數學成績
var english = [60,80,90]; //紀錄英文成績

假設今天有很多個班級,如果每個班級都傳上面的變數,這樣我們要如何來分辨不同的班級,此時就可以使用到物件。

var class1 = {
	name:['Leo','Amy','Perter'],
	math:[80,90,60],
	english:[60,80,90]
}

var class2 = {
	name:['Jack','Alleb','Ray'],
	math:[80,90,60],
	english:[60,80,90]
}

物件包物件

宣告方法

var class1 = {
	'Leo':{
		math:80,
		english:60
	},
	'Jack':{
		math:90,
		english:80
	},
	'Amy':{
		math:60,
		english:55
	}
}

取值方法

console.log(class1.Leo.math) //取得 Leo 數學成績 80 分

物件包方法

宣告方法

var class1 = {
	'Leo':{
		math:80,
		english:60
	},
	'Jack':{
		math:90,
		english:80
	},
	'Amy':{
		math:60,
		english:55
	},
	show:function(){
		console.log('class1')
	}
}

取值方法

class1.show() // 記得一定要加()

陣列包物件

宣告方法

var clas = [
	{
		'Leo':{
			math:80,
			english:60
		},
		'Jack':{
			math:90,
			english:80
		},
		'Amy':{
			math:60,
			english:55
		},
		show:function(){
			console.log('class1')
		}
	},
	{
		'Leo':{
			math:80,
			english:60
		},
		'Jack':{
			math:90,
			english:80
		},
		'Amy':{
			math:60,
			english:55
		},
		show:function(){
			console.log('class2')
		}
	}
];

取值方法

console.log(clas[0].Leo.math)//取得陣列0中Leo的英文成績

上一篇
[Day4] 資料與畫面綁定的方法
下一篇
[Day6] 迴圈(v-for)和條件式(v-if)
系列文
少年學Vue,如隙中窺月30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言